<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>走马灯</title>
</head>

<body>
    <div id="app" class="wrapper-first">
        <div class="carousel-container">
            <div class="carousel-content" :style="carouselStyle">
              <div class="carousel-item" v-for="item in carouselItems" :key="item.id">{{ item.content }}</div>
            </div>
          </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
				currentIndex: 0,
				timer: null,
                carouselItems: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },  { id: 3, content: 'Item 3' },{ id: 4, content: 'Item 4' },     ],     }
        },
       
        computed: {
    carouselStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 100}%)`
      };
    }
  },
  methods: {
    startCarousel() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.carouselItems.length;
      }, 2000); // 每隔2秒滚动一次
    }
  },
  mounted() {
    this.startCarousel();
  }	
    });
</script>

</html>
<style>
    .carousel-container {
  overflow: hidden;
  width: 500px;
  height: 200px;
  position: relative;
}
.carousel-content {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  flex: 0 0 100%;
  width: 100%;
}
</style>
